
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<title></title>
	<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script></head>
	<body>
		<form>
		<div class="logo-box">
			<img src="{:cache('logo')}" />
		</div>
		<style>
			.get-captcha{
				/* width: 1.47rem; */
				height: .51rem;
				border: .01rem solid #ff9e2b;
				color: #ff9e2b;
				text-align: center;
				line-height: .51rem;
				border-radius: .05rem;
				background: #fff;
				outline:0 !important;
				-webkit-appearance: none;
			}
		</style>
		<div class="login-box">
			<div class="box-item">
				<img src="__STATIC__/web_register/images/mobile.png" />
				<input id="phone" name="mobile" type="number" placeholder="请输入您的手机号码" oninput="if( this.value.length > 11 )  this.value = this.value.slice(0,11)" class="mobile-input"/>
			</div>
			<div class="box-item">
				<div style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
					<div style="display: flex; align-items: center;">
						<img src="__STATIC__/web_register/images/verification.png" />
						<input style="width: 2rem;" name="captcha" type="number" placeholder="请输入验证码" oninput="if( this.value.length > 6 )  this.value = this.value.slice(0,6)" class="mobile-input"/>
					</div>
					<input id="btnSendCode" class="get-captcha" class="list_con_li_btn"  type="button" value="获取验证码" onClick="sendMessage()" />
				</div>
			</div>
			<div class="box-item">
				<img src="__STATIC__/web_register/images/password.png" />
				<input name="password" type="password" placeholder="请设置6位以上的密码" class="mobile-input"/>
			</div>
			<div class="box-item">
				<img src="__STATIC__/web_register/images/password.png" />
				<input name="repassword" type="password" placeholder="请再次输入新密码" class="mobile-input"/>
			</div>
			<div class="box-item">
				<img src="__STATIC__/web_register/images/password.png" />
				<input name="city" type="text" placeholder="请输入城市" class="mobile-input"/>
			</div>

			<div class="box-btn" onclick="register()">注 册</div>

<!--			<p class="agree-p">注册即代表阅读并同意<span style="color: #007AFF;">《三捷教育用户协议及隐私权政策》</span></p>-->
			<input type="hidden" name="invite_code" value="{:input('invite_code')}">

		</div>
		</form>
<!--		<p class="no-register" onclick="history.go(-2)">暂不注册</p>-->
	</body>
</html>




<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="__PLUGIN__/layer/layer.js"></script>
<script src="__STATIC__/web_register/js/public.js"></script>

<!--获取验证码-->
<script type="text/javascript">
	var InterValObj; //timer变量，控制时间
	var count = 60; //间隔函数，1秒执行
	var curCount;//当前剩余秒数
	var code = ""; //验证码
	var codeLength = 6;//验证码长度
	function sendMessage() {
		curCount = count;
		var dealType; //验证方式

		var mobile = $("#phone").val();
		if(!mobile){
			layer.msg('手机号不能为空');return
		}
		if ($("#phone").attr("checked") == true) {
			dealType = "phone";
		}
		else {
			dealType = "email";
		}

//产生验证码
		for (var i = 0; i < codeLength; i++) {
			code += parseInt(Math.random() * 9).toString();
		}
//设置button效果，开始计时

//向后台发送处理数据
		$("#btnSendCode").attr("disabled", "true");
		$("#btnSendCode").val(+curCount + "秒再获取");
		InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
		$.ajax({
			type: "POST", //用POST方式传输
			dataType: "json", //数据格式:JSON
			url: "{:url('captcha')}", //目标地址
			data: {'mobile':mobile,'type':'register'},
			async: false,
			error: function (XMLHttpRequest, textStatus, errorThrown) {

			},
			success: function (data) {
				if(data.code !== 200){
					layer.msg(data.msg);
					return false;
				}else{
					$("#btnSendCode").attr("disabled", "true");
					$("#btnSendCode").val(+curCount + "秒再获取");
					InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
				}
			}
		});

	}

	//timer处理函数
	function SetRemainTime() {
		if (curCount == 0) {
			window.clearInterval(InterValObj);//停止计时器
			$("#btnSendCode").removeAttr("disabled");//启用按钮
			$("#btnSendCode").val("重新发送验证码");
			code = ""; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效
		}
		else {
			curCount--;
			$("#btnSendCode").val(+curCount + "秒再获取");
		}
	}

	function register() {
		var v = $('form').serialize();
		$.ajax({
			type: "POST", //用POST方式传输
			dataType: "json", //数据格式:JSON
			url: "{:url('register')}", //目标地址
			data: v,
			async: false,
			error: function (XMLHttpRequest, textStatus, errorThrown) {

			},
			success: function (data) {
				layer.msg(data.msg);
				if (data.code == 200) {
					setTimeout(function () {
						window.location.href = "{:url('')}";
					}, 3000);
				} else {

				}

			}
		});
	}

</script>
<style scoped>
	.logo-box{
		width: 2.36rem;
		height: 2.36rem;
		overflow: hidden;
		margin: .50rem auto;
	}
	.logo-box img{
		width: 2.36rem;
		height: 2.36rem;
	}

	.login-box{
		width: 6rem;
		height: 6.80rem;
		border-radius: .10rem;
		box-shadow: 0 .05rem .30rem .05rem #e2e1e1;
		margin: 0 auto;
		padding: .38rem .46rem 0;
		box-sizing: border-box;
		position: relative;
	}
	.box-item{
		width: 100%;
		height: .75rem;
		margin-bottom: .33rem;
		border-bottom: .01rem solid #e5e5e5;
		display: flex;
		align-items: center;
	}
	.mobile-input{
		margin-left: .30rem;
		border: 0;
		outline: 0;
		height: .54rem;
		font-size: .28rem;
	}
	.box-btn{
		width: 5.1rem;
		height: .80rem;
		border-radius: .10rem;
		background-color: #cf2b37;
		color: #FFFFFF;
		line-height: .80rem;
		text-align: center;
		margin-top: .88rem;
	}
	.agree-p{
		position: absolute;
		font-size: .21rem;
		color: #606161;
		left: 20px;
	}
	.no-register{
		font-size: .26rem;
		color: #007AFF;
		text-align: center;
		margin-top: .35rem;
	}
	.get-captcha{
		/* width: 1.47rem; */
		height: .51rem;
		border: .01rem solid #ff9e2b;
		color: #ff9e2b;
		text-align: center;
		line-height: .51rem;
		border-radius: .05rem;
		outline:0 !important;
		-webkit-appearance: none;

	}
</style>